import { ComponentWithComputed } from 'miniprogram-computed';

const STAR = '/subpkg/assets/icon/star.svg';
const STAR_HALF = '/subpkg/assets/icon/star-half.svg';
const STAR_GRAY = '/subpkg/assets/icon/star-gray.svg';
enum starType {
  full,
  half,
  empty,
}

/** 根据分数返回星星列表 */
const getStarList = (sf_avg: string) => {
  const fullStarCount = Math.floor(Number(sf_avg));
  const halfStarCount = Number(sf_avg) % 1 >= 0.5 ? 1 : 0;
  const emptyStarCount = 5 - Math.ceil(Number(sf_avg));
  const starList = [
    ...Array.from({ length: fullStarCount }, () => ({
      src: STAR,
      type: starType.full,
    })),
    ...Array.from({ length: halfStarCount }, () => ({
      src: STAR_HALF,
      type: starType.half,
    })),
    ...Array.from({ length: emptyStarCount }, () => ({
      src: STAR_GRAY,
      type: starType.empty,
    })),
  ];

  return starList;
};

ComponentWithComputed({
  properties: {
    profile: {
      type: Object,
      value: {},
    },
    commentInfo: {
      type: Object,
      value: {},
    },
    commentList: {
      type: Array,
      value: [],
    },
  },
  computed: {
    starList({ commentInfo: { sf_avg } }) {
      return getStarList(sf_avg);
    },
    commentListWithStarList({ commentList }) {
      return commentList.map((item) => ({
        ...item,
        starList: getStarList(item.satisfaction),
      }));
    },
  },
  lifetimes: {
    created() {
      // console.log('created', this.data);
    },
    attached() {
      console.log('attached', this.data);
    },
  },
  methods: {
    getStarList: getStarList,
  },
});
